<template>
  <div>Child</div>
  <div v-if="modelValue">
    <input type="text" :value="text" @input="send" />
    <button
      @click="
        () => {
          emit('update:modelValue', false)
        }
      "
    >
      close
    </button>
  </div>
</template>
<script setup lang="ts">
const props = defineProps<{
  // 在 props 对象的 modelValue 属性中可以获取到父组件 v-model 传递的数据
  modelValue: boolean
  // 在 props 对象中可以使用 v-model 的命名来获取对应 v-model 传递的值
  text: string
  // 使用 v-model 的命名 Modifiers 连用来获取修饰符对象，实质为可选值
  // 在修饰符对象中可以声明特定的修饰符，其类型均为 boolean
  textModifiers?: {
    isText: boolean
  }
}>()
// 以 modelValue 的 update 来注册自定义事件，表明 v-model 传递的数据已经改变
// 在父组件中不用单独注册自定义事件的处理函数，会自动将更新值更新到父组件的值上
const emit = defineEmits(['update:modelValue', 'update:text'])

const send = (e: Event) => {
  // 获取元素
  const target = e.target as HTMLInputElement
  // 将 value 属性值作为参数传递给 emit
  emit('update:text', target.value)
  if (props.textModifiers) {
    console.log('isBtn')
  }
}
</script>
<style scoped></style>
